<template>
	<view>
		<van-cell>
			<template #title>
				<view v-if="!mangerStatus">
					<van-button size="small" plain type="danger" @click="changeManger(true)">管理</van-button>
				</view>
				<view class="flex" v-else>
					<van-button size="small" type="danger" @click="deleteCart">删除选中</van-button>
					<van-button size="small" type="danger" @click="changeManger(false)">完成管理</van-button>
				</view>
			</template>
		</van-cell>

		<view class="goods" v-for="(cg,cg_idx) in cartGoods">
			<view class="check">
				<radio :checked="cg.checked" @click="clickCheckBox(cg_idx)" checked-color="#ee0a24">
				</radio>
			</view>
			<van-card :price="cg.price/100" :origin-price="cg.pre_price" :desc="cg.desc" :title="cg.name"
				:thumb="cg.goods_thumb">
				<template #tags>
					<van-tag plain type="danger">{{cg.attr_name}}</van-tag>
				</template>
				<template #num>
					<view class="flex-num">
						<view class="btn">
							<van-icon name="minus" @click="subGoods(cg_idx)" />
						</view>
						<view class="btn">
							{{cg.num}}
						</view>
						<view class="btn">
							<!-- 后期可能改为传递id值 -->
							<van-icon name="plus" @click="addGoods(cg_idx)" />
						</view>
					</view>
				</template>
			</van-card>

		</view>
		<!-- 结算 -->
		<van-submit-bar :price="total" button-text="提交订单" @submit="goPay">
			<van-checkbox :value="allChecked" @change="clickAllChecked" checked-color="#ee0a24">全选</van-checkbox>
		</van-submit-bar>

	</view>
</template>

<script>
	import Msg from '@/utils/msg.js'
	import Storage from '@/utils/storage.js'
	export default {
		data() {
			return {
				allChecked: false,
				mangerStatus: false
			}
		},
		computed: {
			cartGoods() {
				if (this.$store.state.cart.cart.length == 0) {
					this.$store.commit("storageToCart")
				}
				return this.$store.state.cart.cart
			},
			total() {
				return this.$store.getters.cartGoodsTotal;
			}
		},
		onLoad() {
			this.mangerStatus = Storage.get('mangerStatus')
		},
		methods: {
			changeManger(b) {
				this.mangerStatus = b
				Storage.set('mangerStatus', b)
			},
			subGoods(index) {
				this.$store.commit("subGoodsNumber", index)
			},
			addGoods(index) {
				this.$store.commit("addGoodsNumber", index)
			},
			clickCheckBox(index) {
				console.log(index);
				this.$store.commit("setGoodsChecked", index)
			},
			clickAllChecked() {
				let checked = !this.allChecked;
				let cgs = this.cartGoods;
				for (let i = 0; i < cgs.length; i++) {
					cgs[i].checked = checked;
				}
				this.cartGoods = cgs;
				this.countCart(cgs);
			},
			deleteCart() { // 删除选中的商品
				let cgs = this.cartGoods;
				let countChecked = 0;
				let cg = [];
				for (let i = 0; i < cgs.length; i++) {
					const elem = cgs[i];
					if (elem.checked) {
						countChecked++;
					} else {
						cg.push(elem)
					}
				}
				if (countChecked == 0) {
					Msg.error("未选中商品")
				}
				this.cartGoods = cg;
				this.countCart(cg);
			},
			goPay(e){
				let cartGoods = this.cartGoods;
				let payGoods = [];
				cartGoods.map((val,key)=>{
					if(val.checked){
						payGoods.push(val)
					}
				});
				Storage.set("countCart",payGoods);
				uni.navigateTo({
					url:"/pages/pay/pay"
				})
			}
		}
	}
</script>

<style>
	.flex-num {
		width: 120rpx;
		display: flex;
	}

	.flex-num .btn {
		width: 38rpx;
		height: 38rpx;
		border: 1rpx solid #ccc;
		text-align: center;
		line-height: 38rpx;
	}

	.flex-num .bth:nth-child(2) {
		border-left: 0;
		border-right: 0;
	}

	.goods {
		display: flex;
		width: 700rpx;
		padding: 0 25rpx;
		background: var(--van-card-background-color);
		border-bottom: 1rpx solid #ccc;
	}

	.goods .check {
		width: 44rpx;
		height: 176rpx;
		padding: 16rpx 0;
		margin: 16rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* #ifdef H5 || APP-PLUS */
	.goods .van-card {
		width: 656rpx;
	}

	.van-nav-bar {
		background: #d81e06;
	}

	.van-nav-bar .van-nav-bar__title {
		color: #FFF !important;
	}

	.van-submit-bar {
		bottom: 110rpx;
	}

	/* # ifend */
</style>
